<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>标签页使用</title>
    <link rel="stylesheet" href="bootstrap/3.3.5/css/bootstrap.min.css"/>
    <script src="html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
<div>
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#p1" aria-controls="home" role="tab" data-toggle="tab">特别推荐</a>
        </li>
        <li role="presentation"><a href="#p2" aria-controls="profile" role="tab" data-toggle="tab">微投资</a></li>
        <li role="presentation"><a href="#p3" aria-controls="messages" role="tab" data-toggle="tab">微小宝</a></li>
        <li role="presentation"><a href="#p4" aria-controls="settings" role="tab" data-toggle="tab">月月盈</a></li>
        <li role="presentation"><a href="#p2" aria-controls="profile" role="tab" data-toggle="tab">稳赢宝</a></li>
        <li role="presentation"><a href="#p3" aria-controls="messages" role="tab" data-toggle="tab">海航通宝</a></li>
        <li role="presentation"><a href="#p4" aria-controls="settings" role="tab" data-toggle="tab">微金宝</a></li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="p1">1</div>
        <div role="tabpanel" class="tab-pane" id="p2">2</div>
        <div role="tabpanel" class="tab-pane" id="p3">3</div>
        <div role="tabpanel" class="tab-pane" id="p4">4</div>
    </div>
</div>
<script src="jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>